<template>
  <div id="Mymanger">
    <x-header>管理会议室</x-header>
    <tab bar-active-color="#00D7C7" active-color="#00D7C7">
      <tab-item selected>全部</tab-item>
      <tab-item :disabled="true"></tab-item>
      <tab-item :disabled="true"></tab-item>
      <tab-item :disabled="true"></tab-item>
    </tab>
    <div>
      <flexbox class="content" @click.native="update()">
        <flexbox-item :span="1/5">
           <div class="picture">
          <img src="../../assets/img/timg.png" width="60px" />
        </div>
        </flexbox-item>
        <flexbox-item :span="4/5">
          <div class="desc">
          <p class="one">演示会议室<span>坐席20人</span></p>
          <p>如何使用请查看会议室预约教程</p>
          <p>会议室地点：如何使用请查看会议预约教程</p>
        </div>
        </flexbox-item>
      </flexbox>
      <flexbox class="flex-border">
        <flexbox-item>
          <div class="flex-demo">
            <i slot="icon" class="iconfont icon-bianji-copy"></i>编辑
          </div>
        </flexbox-item>
        <flexbox-item>
          <div class="flex-demo">
            <i slot="icon" class="iconfont icon-shanchu"></i>删除
          </div>
        </flexbox-item>
        <flexbox-item>
          <div class="flex-demo">
            <i slot="icon" class="iconfont icon-jinyong"></i>禁用
          </div>
        </flexbox-item>
      </flexbox>
    </div>
    <x-button class="addroom" type="primary">添加会议室</x-button>
  </div>
</template>

<style lang='less'>
  #Mymanger {
    .flex-border {
      border: 1px solid #F3F3F3;
      text-align: center;
      .flex-demo {
        height: 3rem;
        line-height: 3rem;
        font-size: 1rem;
        color: #52627e;
      }
    }
    .content {
      color: #999999;
      margin-top: 0px;
      background-color: white;
      overflow: hidden;
      width: 100%;
      p {
        width: 100%;
      }
      .picture {
        padding: 15px;
        padding-top: 0px;
        height: 100%;
      }
      .desc {
        padding: 15px;
        font-size: 0.9rem;
        .one {
          font-size: 1rem;
          padding-bottom: 0.2rem;
          color: black;
          span {
            font-size: 0.5rem;
            margin-left: 1.2rem;
          }
        }
      }
    }
    .addroom {
      margin: 0px auto;
      margin-top: 1rem;
      font-size: 1rem;
      height: 2.8rem;
      line-height: 2.8rem;
      width: 95%;
    }
  }
</style>

<script>
  import { Tab, TabItem, Panel, Flexbox, FlexboxItem, XButton, XHeader } from "vux";

  export default {
    name: "Login",
    components: {
      Tab,
      TabItem,
      Panel,
      Flexbox,
      FlexboxItem,
      XButton,
      XHeader
    },
    data() {
      return {
      };
    },
    methods: {
      update() {
        this.$router.push({
          path: "/updatamanger"
        });
      },
      nomore() {
        console.log("nomore");
      }
    }
  };
</script>
